<template>
	<view class="login container" :style="[{'font-weight':Style,'font-family':Font}]" @tap.stop="closeMenu">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon cuIcon-back" @click="navBack" v-if="isshow"></view>
		<view class="back-btn2 cuIcon-settings" @click="setIP"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				欢迎回来！
			</view>
			<view class="input-content">
				<wInput v-model="lusercode" type="text" :mainlist="'main-listTh'" maxlength="20" placeholder="用户名/电话">
					<text style="padding-right: 20rpx;" @tap="clean" v-show="lusercode" slot="icon" class="lg text-gray cuIcon-roundclosefill"></text>
					<text slot="unfold" :class="['lg text-gray cuIcon-unfold',viewName]" @tap.stop="active"></text>
					<view style="transition: all 0.3s ease-in-out;z-index: 9;" slot="screen" class="grid text-center col-1 screen"
					 v-show="isactive">
						<view class="padding-sm flex borderS" v-for="(item,index) in usercodeList" :key="index">
							<view style="flex: 9;" @tap.stop="selection(item)">{{item}}</view>
							<text @tap.stop="cleanList(index)" class="lg text-gray cuIcon-roundclosefill"></text>
						</view>
					</view>
				</wInput>
				<wInput v-model="lpassword" type="password" maxlength="11" placeholder="密码"></wInput>
			</view>
			<wButton text="登 录" :rotate="isRotate" @click.native="startLogin()"></wButton>
		</view>
		<view class="register-section">
			<text>Copyright © 安徽柠徽信息工程有限公司</text>
		</view>
	</view>
</template>

<script>
	import {
		getbind
	} from '@/service/home.js'
	import {
		postlogin
	} from "@/service/login.js";
	import wInput from "@/colorui/components/watch-input.vue"; //input
	import wButton from "@/colorui/components/watch-button.vue"; //button
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				lusercode: "",
				lpassword: "",
				usercodeList: [],
				viewName: 'isviewClose',
				isactive: false,
				isshow: false,
				logoImage: "../../static/images/logo.png",
				isRotate: false //是否加载旋转
			};
		},
		computed: {
			...mapGetters(["Style", 'Font', ])
		},
		onLoad() {
			this.lusercode = uni.getStorageSync("lusercode");
			this.usercodeList = uni.getStorageSync("usercodeList");
		},
		components: {
			wInput, //input
			wButton //button
		},
		mounted() {
			this.isshow = !global.falg;
		},
		methods: {
			active() {
				this.viewName = (this.viewName == 'isviewOpen' ? 'isviewClose' : 'isviewOpen')
				this.isactive = !this.isactive
			},
			//清除数据
			clean() {
				this.lusercode = ''
			},
			closeMenu() {
				this.viewName = 'isviewClose'
				this.isactive = false
			},
			cleanList(index) {
				console.log(index);
				this.usercodeList.splice(index, 1)
				console.log(this.usercodeList);
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				uni.setStorage({
					key: "usercodeList",
					data: this.usercodeList,
					success: function() {}
				})
			},
			selection(item) {
				this.lusercode = item
				this.viewName = (this.viewName == 'isviewOpen' ? 'isviewClose' : 'isviewOpen')
				this.isactive = false
				var result = this.usercodeList.some((val) => {
					if (val == item) {
						return true;
					}
				})
				if (!result) {
					this.usercodeList.push(item)
				}
			},
			startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.lusercode.length == "") {
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "用户名不能为空"
					});
					return;
				} else {
					// #ifdef APP-PLUS
					let id = uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT')
					getbind(plus.push.getClientInfo().clientid, id).then(res => {
						uni.setStorage({
							key: "clientid",
							data: 'clientid',
							success: function() {}
						});
					})
					// #endif
					//请求接口数据 绑定登录是否成功
					// console.log(postlogin);
					// console.log(this.lusercode);
					// console.log(this.$http.req.defaultData.baseUrl);
					postlogin(this.lusercode, this.lpassword)
						.then(res => {
							if (res.code === 1) {
								//登录成功将账号和密码缓存
								global.userinfo = res.data;
								uni.setStorage({
									key: "userinfo",
									data: res.data,
									success: function() {}
								});
								global.falg = false;
								global.tree = true
								global.userRefresh = true
								var result = this.usercodeList.some((item) => {
									if (item == this.lusercode) {
										return true;
									}
								})
								if (!result) {
									this.usercodeList.push(this.lusercode)
								}
								uni.setStorage({
									key: "usercodeList",
									data: this.usercodeList,
									success: function() {}
								})
								this.$http.req.defaultData.header.token = res.token
								uni.setStorage({
									key: "token",
									data: res.token,
									success: function() {}
								});
								uni.setStorage({
									key: "lusercode",
									data: this.lusercode,
									success: function() {}
								});
								uni.setStorage({
									key: "lpassword",
									data: this.lpassword,
									success: function() {}
								});
								// 跳转到首页
								// uni.navigateBack({
								// 	delta:1
								// })
								setTimeout(() => {
									uni.reLaunch({
										url: `../home/home`
									});
									uni.showToast({
										title: "登录成功",
										duration: 2000
									});
								}, 800)
							} else {
								// 账号密码错误提示
								uni.showToast({
									title: "账号密码错误",
									icon: "none",
									duration: 2000
								});
								this.isRotate = false;
							}
						})
						.catch(err => {
							this.isRotate = false;
							uni.showToast({
								title: "访问服务器失败！",
								icon: "none",
								duration: 2000
							});
						});
				}
				this.isRotate = true;
				// 三秒后关闭登录按钮效果
				setTimeout(function() {
					this.isRotate = false;
				}, 3000);
			},
			navBack() {
				// 跳转到首页
				uni.navigateBack({
					delta: 1
				})
			},
			// 跳转设置IP页面
			setIP() {
				uni.navigateTo({
					url: `./setIP/setIP`
				});
			}
		}
	};
</script>

<style lang="scss">
	@import "../../static/css/main.css";

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.back-btn,
	.back-btn2 {
		position: absolute;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 50upx;
		color: $font-color-dark;
	}

	.back-btn {
		left: 40upx;
	}

	.back-btn2 {
		right: 40upx;
	}


	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}

	.input-content {
		padding: 0 60upx;

		.borderS {
			border-bottom: 2rpx solid #EEEEEE;
		}

		.borderS:last-child {
			border: none;
		}

		.isviewOpen {
			transform: rotate(180deg);
		}

		.isviewClose {
			transform: rotate(0deg);
		}

		.screen {
			position: absolute;
			top: 100%;
			left: -2rpx;
			width: 100%;
			border-radius: 40rpx;
			background-color: #f5f7fa;
		}
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
